<%@page import="com.eportal.util.WebUtil"%>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
     <meta name="renderer" content="webkit">
    <meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">
    
    
    <title>智能锁管理系统-登录页面</title>
	
	<!--IE的兼容-->
<!--[if IE]>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/html5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/excanvas.js"></script>
<![endif]-->
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.form.js"></script>
	<script src="${pageContext.request.contextPath}/static/js/jquery.cookie.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.validate.min.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/js/jquery.qrcode.min.js" type="text/javascript"></script>

    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/html5.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/respond.min.js"></script>
    <![endif]-->

	<style type="text/css">
	*{
		padding:0;
		margin:0;
		box-sizing: border-box;
	}
	html,body{
		height:100%;
		width:100%;
	}
	body{
		background:url("../../static/images/webbg2.jpg") center  no-repeat;

	}
	.wraper{
		width:980px;
		margin:0 auto;
		height:100%;
		position:relative;
	}
	.login{
		overflow:auto;
		height:500px;
		width:980px;
		position:absolute;
		top:50%;
		padding-right:10px;
		margin-top:-240px;
	}
	.n {
		background:#fff;
		height: 350px;
		border-radius:6px;
	
	}
	.shadow{
		box-shadow:4px 4px 5px #528bc6;
		-webkit-box-shadow:4px 4px 5px #528bc6;
		-moz-box-shadow:4px 4px 5px #528bc6;
		-ms-box-shadow:4px 4px 5px #528bc6;
		-o-box-shadow:4px 4px 5px #528bc6;
    }
	#account_login{
		padding:0 86px;
		box-shadow:3px 4px 5px #4178b0;
	}
	.tip{
		font-size: 20px;
		text-align:center;
		font-family: 微软雅黑;
		font-weight:600;
		color: #333;
		
	} 
	.tipName{
		text-align:center;
		padding:40px 0 20px;
	}
	.d{
		text-align:center;
		margin-top: 14px;
		height: 45px;
		width: 300px;
		margin:0 auto;
		margin-top: 14px;
		display: block;
		background: white;
		border:3px;
	}
	.b{
		border:1px solid #b6b6b6;
		border-radius:3px;
	}
	.border {
		border-style: solid;
		border-color: #339933;
		border-width:1px;
	}
	.input{
		height: 42px;
		line-height:42px;
		width: 254px;
		background:#fff;
		font-family: 微软雅黑;
		border: 1px solid transparent; 
		border-radius: 4px; 
		vertical-align: middle;
		padding-left:5px;
	}
	.input:focus {
		outline:none;
	}
	.form{
		text-align:center;
		width: 290px;
		margin:0 auto;
	}
	.submit{ 
		height: 46px; 
		width: 300px; 
		font-size: 16px !important; 
		font-family: 微软雅黑; 
		color:white !important; 
		background-color: #ffa20e !important; 
		border-color: #ffa20e !important; 
		border: 1px solid transparent; 
		border-radius: 3px; 
	} 
	.zc1{
		font-size: 14px;
		font-family: 微软雅黑;
		color: #b6b6b6;
	}
	.zc2{
		font-size: 14px;
		font-family: 微软雅黑;
		color:#1e4e9e;
	}
	.di{
		padding-top: 16px;
		text-align:center;
		
	}
	.top{
		margin-top: 4%;
		text-align:center;		
	}
	.topfont{
		font-size: 60px;
		color: #504D4D;
	}
	.bottom{
		position: absolute;
		bottom: 30px;
		margin:auto;
		left: 42%;
		text-align:center;	
	}
	.bottomfont{
		display: block;
		font-size: 24px;
		color: #504D4D;
	}	
	.label1{
		width: 35px;
		height: 35px;
		background-image:url("../../static/images/name.png");
	}
	.tb{
		vertical-align: middle;
		float: left;
		height:42px;
		*+height:24px;
		background: white;
		padding:10px 12px;
		border-right:1px solid #d5d5d5;
	}
	.bottom2{
		position:absolute;
		bottom: 0px;
		margin:0 auto;
		width:980px;
		text-align:center;
		height:70px;
		line-height:70px;
		width:100%;
		background:rgba(0,0,0,0.3);
	}
	.bottom2 a{
		color:#b0b2b6;
		font-size: 12px;
	}

	.bottomfont2{
		display: block;
		font-size: 12px;
			
	}	
	.next_bind{
		width: 120px;
		margin: 0 auto;
		border:1px solid #000;
		text-align: center;
		height: 25px;
		line-height: 25px;
		border-radius:8px;
		cursor:pointer;
	}
	label{
		margin-bottom: 0px;
        font-weight: 500;
	}
	.zc1 input{
		margin-right:10px !important;
		width:18px!important;
		height:18px !important;
	}
	.titles{
			text-shadow:#294b6e 3px 2px 2px;
		}
	</style>
</head>
<body>
   <div class="wraper">
		<div class="login">
		    <div class="titles" style="text-align:right;padding-right:148px;color:#fff;font-size:30px;padding-bottom:38px;">智能锁管理系统</div>
				<div class="n shadow" style="float:left;width: 400px;background:rgba(187,210,244,0.5);">
					<div class="tipName">
						<a class="tip">二维码登录</a>
					</div>
					 <div style="width: 180px;height: 180px;margin:5px auto" id='code' >
					 	<img src="" id="code_img">
					 </div>
					 <div style="text-align: center;margin-top:20px;">打开手机开门app管理“扫一扫”登录</div>
				</div>
				<div class="n" id="account_login" style="width:500px;float:right;display:block;">
					<div class="tipName">
					   <a class="tip">用户登录</a>
					</div>
					<form class="form" action="" method="post" id="loginform">

						<div class="d b" id="userNameDiv"> 
							<div class="tb">
							<img src="${pageContext.request.contextPath}/static/images/n.jpg" alt="" /> 
							</div>
							<input type="text" placeholder="请输入手机号码" class="input" name="userName" id="userName">
						</div >
						<div class="d b" id="passwdDiv">
							<div class="tb">
								<img src="${pageContext.request.contextPath}/static/images/p.jpg" /> 
							</div>
							<input class="input" type="password" placeholder="请输入密码" name="passwd" id="passwd">
						</div>
						<div class="di" style="overflow:auto;">
							<label class="zc1" style="float:left;"><input id="rember" type="checkbox" value="" />记住用户名</label>
							<a class="zc2" style="float:right;text-decoration: underline!important" onclick="findPassword()">忘记密码?</a>
						</div>
						<div class="d">
							<input type="submit" class="submit" value="立即登录"/>
						</div>
						<div class="di">
							<a class="zc1">还没有账户？</a> 
							<a class="zc2" onclick="register()" style="text-decoration: underline!important">立即注册</a>
						</div>
					</form>
				</div>
			<div class="n" id="old_user_bind" style="display:none;width:500px;float:right;">
				<div class="tipName">
					<p style="font-size: 16px">打开手机开门app"扫一扫"绑定</p>
				</div>
				<div style="width: 180px;height: 180px;margin:5px auto" id='bind_code' ></div>
				<div style="text-align: center;font-size: 16px;font-weight: bold;">绑定后下次可扫码登录和APP登录</div>
				<div style="">
					<div style="" class="next_bind" onclick="window.location.href = '${pageContext.request.contextPath}/admin/index.action';">
						下次再绑定
					</div>
				</div>
			</div>
		  </div>
		
		</div>
		<div class="bottom2">
			<a>Copyright @2016 浙ICP备16029736号掌连信息版权所有</a>
		</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	if ($.cookie("rmbUser") == "true") {
		$("#rember").attr("checked", true);
		$("#userName").val($.cookie("username"));
    }
})
//记住用户名
  function save(){
	  var check=document.getElementById("rember").checked;
	  if(check){
		  var userName=$("#userName").val();
		  $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie
      	  $.cookie("username", userName, { expires: 7 });
	  }else{
		  <!--$.cookie("rmbUser","false",{expires:-1});-->
		  <!--$.cookie("userName","",{expires:-1})-->
	  }
  }
var k = '<%=request.getAttribute("k")%>';
    $(function () {
        $("#loginform").validate({
            rules: {
            	userName: "required",
            	passwd: "required"
            },
            messages: {
            	userName: "请输入账号",
            	passwd: "请输入密码"
            },
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    type: "post",  //提交方式
                    url: "/admin/doLogin.action", //请求url
                    success: function (data) { //提交成功的回调函数
						save();
                        data = eval("(" + data + ")");
                        if (data.code == 1) {
                        	if(data.needQrcodeBind=='1'){
                        		$("#account_login").hide();
                        		$("#old_user_bind").show();
                            	$('#bind_code').qrcode({
                        			width: 180,
                        			height:180,
                        			text: data.qrcodeStr
                        		});
                        	}else{
                        		window.location.href = "${pageContext.request.contextPath}/admin/index.action";	
                        	}
                        	
                            
                        } else {
                            layer.alert(data.msg);
                        }
                    }
                });
            }
        });
        
    	var str = "<%=WebUtil.getReqPreUrl(request)%>${pageContext.request.contextPath}u/c?k="+k;
    	/* $('#code').qrcode({
			width: 180,
			height:180,
			text: str
		}); */
    	$("#code_img").attr("src","${pageContext.request.contextPath}/admin/common_genQrImg.action?w=180&h=180&url="+str)
    	 window.setTimeout("checkLogin()",500); 
    });
    
    $("#userName").focus(
    		function(){
    			$("#userNameDiv").addClass("border");		
    		}
    	).blur(
    		function(){
    			$("#userNameDiv").removeClass("border");		
    	});
    $("#passwd").focus(
    		function(){
    			$("#passwdDiv").addClass("border");		
    		}
    	).blur(
    		function(){
    			$("#passwdDiv").removeClass("border");		
    	});
	function register(){
		window.location.href = "${pageContext.request.contextPath}/register/tComuLockRegister.action";
	}
	function findPassword(){
		window.location.href = "${pageContext.request.contextPath}/register/findPassword.action";
	}
	
	function checkLogin(){
		
		$.ajax({   
		    url:'<%=request.getContextPath()%>/admin/doLoginByQrcode.action',   
		    type:'post',   
		    data:'k='+k,   
		    async : true, //默认为true 异步   
		    dataType:'json',
		    error: function(XMLHttpRequest, textStatus, errorThrown) {
		    },  
		    success:function(result){   
		    	var data = result.data;
		       if(result.code=='1'){
		    	   window.location.href = "${pageContext.request.contextPath}/admin/index.action";
		       }else if(result.code=='-100'){
		    	  
		    	   window.setTimeout("checkLogin()",500); 
		       }else if(result.code=='-200'){
		    	   layer.alert(data.msg);
		       }else{
		    	   layer.alert(data.msg);
		       }
		    }
		});
	}
</script>

</body>
</html>